<template>
    <div class="tab">
        <div :class="{
            item: true, 
            active: showIndex === 0
        }" @click="showIndex = 0">
            <img src="~@/assets/tab_normal.png" alt="">
            <img src="~@/assets/tab_select.png" alt="">
        </div>
        <div :class="{
            item: true, 
            active: showIndex === 1
        }" @click="showIndex = 1">
            <img src="~@/assets/more_normal.png" alt="">
            <img src="~@/assets/more_select.png" alt="">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const showIndex = ref(0)

watch(showIndex, (val) => {
    if (val == 0) {
        router.push({path: '/'})
    } else if (val == 1) {
        router.push({path: '/more'})
    }
})
</script>

<style lang="scss" scoped>
.tab {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 50px;
    display: flex;
    box-shadow: 0 0 3px #ccc;
    background-color: #fff;
    .item {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
            margin-bottom: 2px;
            width: 24px;
            height: 24px;
        }
        img:nth-of-type(1) {
            display: block;
        }
        img:nth-of-type(2) {
            display: none;
        }

    }

    .active {
        img:nth-of-type(1) {
            display: none;
        }
        img:nth-of-type(2) {
            display: block;
        }
    }
}
</style>